<template>
  <div class="wrap">
    <div class="show-title">
      <span>系统配置参数设置</span>
    </div>
    <el-form
      :inline="true"
      :model="ruleform"
      ref="from"
      :rules="rules"
      class="demo-form-inline ip-form"
    >
      <el-form-item label="票据主机" prop="ticket_ip">
        <el-input v-model="ruleform.ticket_ip" message placeholder></el-input>
      </el-form-item>
      <el-form-item label="外网地址" prop="ticket_ip_lan" show-overflow-tooltip>
        <el-input
          v-model="ruleform.ticket_ip_lan"
          message
          placeholder
        ></el-input>
      </el-form-item>
      <el-form-item label="：" prop="ticket_port">
        <el-input
          v-model.number="ruleform.ticket_port"
          type="number"
          style="width:100px"
          message
          placeholder
        ></el-input>
      </el-form-item>
      <br />
      <el-form-item label="流量主机" prop="traffic_ip" show-overflow-tooltip>
        <el-input v-model="ruleform.traffic_ip" message placeholder></el-input>
      </el-form-item>
      <el-form-item label="外网地址" prop="traffic_ip_lan">
        <el-input
          v-model="ruleform.traffic_ip_lan"
          message
          placeholder
        ></el-input>
      </el-form-item>
      <el-form-item label="：" prop="traffic_port">
        <el-input
          v-model.number="ruleform.traffic_port"
          type="number"
          style="width:100px"
          message
          placeholder
        ></el-input>
      </el-form-item>
      <br />
      <el-form-item label="报告主机" prop="report_ip" show-overflow-tooltip>
        <el-input v-model="ruleform.report_ip" message placeholder></el-input>
      </el-form-item>
      <el-form-item label="外网地址" prop="report_ip_lan">
        <el-input
          v-model="ruleform.report_ip_lan"
          message
          placeholder
        ></el-input>
      </el-form-item>
      <el-form-item label="：" prop="report_port">
        <el-input
          v-model.number="ruleform.report_port"
          type="number"
          style="width:100px"
          message
          placeholder
        ></el-input>
      </el-form-item>
      <br />
      <!-- <el-form-item label="S  P  主  机" prop="sp_verify_ip">
        <el-input
          v-model="ruleform.sp_verify_ip"
          message
          placeholder
        ></el-input>
      </el-form-item>
      <el-form-item label="：" prop="sp_verify_port">
        <el-input
          v-model.number="ruleform.sp_verify_port"
          type="number"
          style="width:100px"
          message
          placeholder
        ></el-input>
      </el-form-item>
      <br />
      <el-form-item label="SP支持厂家" prop="sp_factories">
        <el-checkbox-group v-model="ruleform.sp_factories">
          <el-checkbox label="2" name="type">海康</el-checkbox>
          <el-checkbox label="25" name="type">大华</el-checkbox>
          <el-checkbox label="32" name="type">美电贝尔</el-checkbox>
          <el-checkbox label="23" name="type">汉邦</el-checkbox>
          <el-checkbox label="33" name="type">宇视</el-checkbox>
        </el-checkbox-group>
      </el-form-item> -->
      <br />
      <el-form-item>
        <el-button type="primary" plain @click="onSubmit('from')"
          >保存</el-button
        >
        <el-button type="warning" plain @click="onReset('from')"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getData, postData } from "@/request/http";
import { resetForm } from "@/utils/Tool";
export default {
  name: "systemParamSetting",
  components: {},
  data() {
    // var checkPortNumber = (rule, value, callback) => {
    //   if (!value) {
    //     return callback(new Error("端口只能是数字"));
    //   }
    // };
    /*ip正则验证*/
    var validcodeip = (rule, value, callback) => {
      const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
      if (reg.test(value) || value.length == 0) {
        callback();
      } else {
        return callback(new Error("请输入正确的IP格式！"));
      }
    };
    return {
      //添加
      ruleform: {
        ticket_ip: "",
        ticket_ip_lan: "",
        ticket_port: "",
        traffic_ip: "",
        traffic_ip_lan: "",
        traffic_port: "",
        report_ip: "",
        report_ip_lan: "",
        report_port: "",
        // sp_verify_ip: "",
        // sp_verify_port: "",
        // sp_factories: [],
      },
      rules: {
        ticket_ip: [
          { required: false, message: "请输入票据主机", trigger: "blur" },
          { validator: validcodeip, trigger: "blur" },
        ],
        ticket_ip_lan: [
          { required: false, message: "请输入", trigger: "blur" },
          { validator: validcodeip, trigger: "blur" },
        ],
        ticket_port: [
          { required: false, message: "" },
          { type: "number", message: "必须为数字值" },
        ],
        traffic_ip: [
          { required: false, message: "请输入", trigger: "blur" },
          { validator: validcodeip, trigger: "blur" },
        ],
        traffic_ip_lan: [
          { required: false, message: "请输入", trigger: "blur" },
          { validator: validcodeip, trigger: "blur" },
        ],
        traffic_port: [
          { required: false, message: "" },
          { type: "number", message: "必须为数字值" },
        ],
        report_ip: [
          { required: false, message: "请输入", trigger: "blur" },
          { validator: validcodeip, trigger: "blur" },
        ],
        report_ip_lan: [
          { required: false, message: "请输入", trigger: "blur" },
          { validator: validcodeip, trigger: "blur" },
        ],
        report_port: [
          { required: false, message: "" },
          { type: "number", message: "必须为数字值" },
        ],
        // sp_verify_ip: [
        //   { required: false, message: "请输入", trigger: "blur" },
        //   { validator: validcodeip, trigger: "blur" },
        // ],
        // sp_verify_port: [
        //   { required: false, message: "" },
        //   { type: "number", message: "必须为数字值" },
        // ],
        // sp_factories: [
        //   {
        //     type: "array",
        //     required: false,
        //     message: "请至少选择一个厂家",
        //     trigger: "change",
        //   },
        // ],
      },
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.init();
    var req = new XMLHttpRequest();
    req.open("GET", document.location, false);
    req.send(null);
    var headers = req.getResponseHeader("content-length");
  },
  methods: {
    //初始获取填入
    init() {
      var that = this;
      postData("/adminweb/sys/setting/get", {})
        .then((res) => {
          //console.log(res);
          if (res.code == 0) {
            let datas = res.datas;
            that.ruleform.ticket_ip = datas.ticket_ip;
            that.ruleform.ticket_ip_lan = datas.ticket_ip_lan;
            that.ruleform.ticket_port = Number(datas.ticket_port);
            that.ruleform.traffic_ip = datas.traffic_ip;
            that.ruleform.traffic_ip_lan = datas.traffic_ip_lan;
            that.ruleform.traffic_port = Number(datas.traffic_port);
            that.ruleform.report_ip = datas.report_ip;
            that.ruleform.report_ip_lan = datas.report_ip_lan;
            that.ruleform.report_port = Number(datas.report_port);
            // that.ruleform.sp_verify_ip = datas.sp_verify_ip;
            // that.ruleform.sp_verify_port = Number(datas.sp_verify_port);
            // that.ruleform.sp_factories = JSON.parse(datas.sp_factory);
          } else if (res.code == -56055) {
            return;
          } else {
            that.$message.error(res.code + "，" + res.msg + 1);
          }
        })
        .catch((res) => {
          that.$message.error(res.code + "，" + res.msg + 2);
        });
    },
    //添加 提交
    onSubmit(formName) {
      var that = this;
      that.$refs[formName].validate((valid) => {
        if (valid) {
          postData("/adminweb/sys/setting/set", {
            ticket_ip: that.ruleform.ticket_ip,
            ticket_ip_lan: that.ruleform.ticket_ip_lan,
            ticket_port: Number(that.ruleform.ticket_port),
            traffic_ip: that.ruleform.traffic_ip,
            traffic_ip_lan: that.ruleform.traffic_ip_lan,
            traffic_port: Number(that.ruleform.traffic_port),
            report_ip: that.ruleform.report_ip,
            report_ip_lan: that.ruleform.report_ip_lan,
            report_port: Number(that.ruleform.report_port),
            // sp_verify_ip: that.ruleform.sp_verify_ip,
            // sp_verify_port: Number(that.ruleform.sp_verify_port),
            // sp_factories: that.ruleform.sp_factories,
          })
            .then((res) => {
              if (res.code == 0) {
                //console.log(res);
                that.$message.success("配置成功！");
              } else {
                that.$message.error(res.code + "，" + res.msg);
              }
            })
            .catch((res) => {
              that.$message.error(res.code + "，" + res.msg);
            });
        } else {
          that.$message.error("error");
          return false;
        }
      });
    },
    // 重置
    onReset(val) {
      this.$emit("reset", true);
      this.$refs[val].resetFields();
    },
  },
  watch: {},
};
</script>
<style scoped>
/* 更改table,表头背景 */
.wrap >>> .el-table--border th,
.el-table__fixed-right-patch {
  /* background: #c0dee2; */
  background: #f0f3f4;
}
.wrap {
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
/*title*/
.show-title {
  width: 100%;
  height: 40px;
  line-height: 40px;
  position: relative;
  background: #c0dee2;
  padding-left: 15px;
  font-size: 14px;
  margin: 6px 0 20px 0;
  border-radius: 12px 12px 0 0;
  font-weight: bold;
}

.show-title::before {
  content: "";
  width: 2px;
  height: 16px;
  background: #676a6d;
  position: absolute;
  top: 12px;
  left: 27px;
}

.show-title span {
  float: left;
  color: #676a6d;
  margin-left: 25px;
}
</style>
